<template>
  <div class="dashboard-container">
    <div class="important-events-container">
        <important_events></important_events>
        <!--      大事提醒-->
    </div>

    <div class="campus-activities-container">
        <campus-activities></campus-activities>
<!--      校园活动-->
    </div>
    <div class="information_statistics_container">
      <gContaner></gContaner>
      <!--      学生信息统计-->
    </div>
    <div class="campus-announcements-container">
      <campus_Announcements></campus_Announcements>
<!--      校园通知-->
    </div>

    <div class="campus-news-container">
      <campus_news></campus_news>
<!--      学院新闻-->
    </div>
    <div class="statistical-map-container">
      <movemap class="map"></movemap>
      <countmap class="map"></countmap>
      <!--      统计地图-->
    </div>
<!--        <div class="photo_display_container">-->
<!--          <scrollPhotos></scrollPhotos>-->
    <!--      学生风采展示-->
<!--        </div>-->
  </div>
</template>

<script>


import gContaner from "@/views/charts/Contaner.vue";
import campus_news from "@/views/news/CampusNews.vue";
import ScrollPhotos from "@/views/photo/ScrollPhotos.vue";
import CampusActivities from "@/views/activities/CampusActivities.vue";
import Campus_Announcements from "@/views/notice/CampusAnnouncements.vue";
import Countmap from "@/views/charts/CountMap.vue";
import movemap from "@/views/charts/MoveMap.vue";
import Important_events from "@/views/event/ImportantEvents.vue";

export default {
  components: {Important_events, movemap, Countmap, Campus_Announcements, CampusActivities, ScrollPhotos, campus_news, gContaner},

  data() {
    return {};
  }
};
</script>

<style scoped>
.dashboard-container {
  margin-top: 10px; /* 设置顶部边距为10像素 */
  display: grid; /* 使用网格布局 */
  gap: 1ch; /* 设置元素之间的间距为1ch */
  & > * {
    background: var(--bg, #EEE); /* 设置背景颜色，默认为#EEE */
    border-radius: 2ch; /* 设置边框圆角为2ch */
    color: hsl(215, 75%, 10%); /* 设置文本颜色为hsl(215, 75%, 10%) */
    container-type: inline-size; /* 设置容器类型为inline-size */
    grid-column: var(--gc, auto); /* 设置列位置，若未指定则为自动 */
    grid-row: var(--gr, auto); /* 设置行位置，若未指定则为自动 */
    padding: 2ch; /* 设置内边距为2ch */
  }
}
.dashboard-container {
  overflow-x: auto;
}

/* 各个容器的背景样式 */
.photo_display_container { --bg: linear-gradient(-45deg, #F7F1FF 0%, #E7FFEC 20%, #D1F9E7 39%, #BCD2E7 76%, #B8D0E5 100%); }
.campus-news-container {
  --bg: linear-gradient(45deg, #87CEFA 0%, #C0F0F1 20%, #A0E2EF 39%, #68B5EB 76%, #7CACD2 100%); /* 设置渐变背景 */
  gap: 1ch; /* 设置元素之间的间距为1ch */
  grid-template-columns: repeat(1, 1fr); /* 设置列为一行 */
  background: var(--bg); /* 应用渐变背景 */
}

/* 其他容器 */
.campus-activities-container, .statistical-map-container, .campus-announcements-container, .information_statistics_container { --bg: linear-gradient(-45deg, #F7F1FF 0%, #E7FFEC 20%, #D1F9E7 39%, #BCD2E7 76%, #B8D0E5 100%); }

.campus-announcements-container { --bg: linear-gradient(-45deg, #F7F1FF 0%, #E7FFEC 20%, #D1F9E7 39%, #BCD2E7 76%, #B8D0E5 100%) }
.statistical-map-container { --bg: linear-gradient(-95deg, #E6F8FF 0%, #B9F9EF 20%, #87F2E9 39%, #51D7E8 76%, #59C6D8 100%) }
.information_statistics_container {
  --bg: linear-gradient(-45deg, #F7F1FF 0%, #E7FFEC 20%, #D1F9E7 39%, #BCD2E7 76%, #B8D0E5 100%);
  font-size: 1.5em;
  text-align: center;
}
.important-events-container {
  --bg: linear-gradient(45deg, #87CEFA 0%, #C0F0F1 20%, #A0E2EF 39%, #68B5EB 76%, #7CACD2 100%);
}

@media (min-width: 1500px) {
  /* 在宽度大于等于1024像素时应用的样式 */
  .photo_display_container { --gc: span 8; } /* 横跨8列 */
  .campus-news-container { --gc: span 5; } /* 横跨5列 */
  .campus-activities-container { --gc: span 3; } /* 横跨4列 */
  .dashboard-container { grid-template-columns: repeat(7, 1fr); } /* 7列等宽布局 */
  .campus-announcements-container { --gc: span 2; --gr: span 3; } /* 横跨2列，纵跨3行 */
  .statistical-map-container { --gc: span 5; --gr: span 2; display: flex; } /* 横跨5列，纵跨2行 */
  .information_statistics_container { --gc: span 7; } /* 横跨7列 */
  .important-events-container { --gc: span 4; } /* 横跨4列 */
}
</style>


